<template>
  <view>
    <view class="header">
      校园导览
    </view>
    <movable-area class="goAiBox">
      <movable-view class="goAi" :x="x" :y="y" direction="all" @click="goAi()">
        <image src="/static/ai.png" mode=""></image>
      </movable-view>
    </movable-area>
    <view class="container">
      <block v-for="(item,index) in guideInfo" :key="index">
        <view class="nav-box" @click="goGuide(item)">
          <view class="image">
            <image :src="item.imageUrl"></image>
          </view>
          <view class="nav-title">
            {{item.description}}
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        x: 280,
        y: 650,
        guideInfo: [],
        page: 1,
        pagesize: 8,
      };
    },
    created() {
      this.getGuideInfo()
    },
    methods: {
      goAi() {
        uni.navigateToMiniProgram({
          appId: 'wxf7e62e171223c884',
          path: '/pages/conversation/index?app_id=3754784f-303c-40fb-aff6-98384ba41926',
          envVersion: 'release',
          success(res) {
            console.log(res);
          },
          fail(res) {
            console.log(res);
          }
        })
      },
      goGuide(item) {
        uni.navigateTo({
          url: '/subpkg/guide/guide?item=' + JSON.stringify(item)
        })
      },
      async getGuideInfo() {
        const data = await uni.$http.post('/users/scenery/page', {
          page: this.page,
          pagesize: this.pagesize
        })
        this.guideInfo = data.data.data.records
      }
    },
    onReachBottom() {
      this.pagesize += 8
      this.getGuideInfo()
    }
  }
</script>

<style lang="scss">
  .header {
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #fff;
  }

  .goAiBox {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 99999;

    .goAi {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: #fff;
      pointer-events: auto;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 40rpx;

    .nav-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 85%;
      height: 480rpx;
      padding: 30rpx;
      margin-top: 50rpx;
      background-color: #fff;

      .image {
        width: 100%;
        height: 400rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .nav-title {
        margin-top: 30rpx;
        text-align: center;
      }
    }
  }
</style>